<style>
    #add {
        padding: 20px 25px 25px 0;
    }

    #add .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }
</style>
<div class="layui-fluid" id="add">
    <form class="layui-form" action="" lay-filter="user-add-form">
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">课程名：</label>
            <div class="layui-input-block">
                <input type="text" name="courseName" autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班级：</label>
            <div class="layui-input-block">
                <div class="dept-tree" lay-filter="deptTree" style="margin-left: 1rem"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">课程内容：</label>
            <div class="layui-input-block">
                <input type="hidden" name="remark" id="remark">
                <div id="editor">
                    <p>请输入 <b>课程内容</b> 或描述</p>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">状态：</label>
            <div class="layui-input-block">
                <input type="radio" name="state" value="1" title="有效" checked="">
                <input type="radio" name="state" value="0" title="禁用">
            </div>
        </div>

        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="user-add-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>
<script type="text/javascript" th:src="@{febs/lay/extends/wangEditor.min.js}"></script>
<script>
    layui.use(['febs', 'form', 'validate', 'eleTree'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            eleTree = layui.eleTree,
            form = layui.form,
            $view = $('#add'),
            validate = layui.validate,
            _deptTree;

        form.verify(validate);
        form.render();

        renderDeptTree();

        var E = window.wangEditor;
        var editor = new E('#editor');
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create();

        function renderDeptTree() {
            _deptTree = eleTree.render({
                elem: '.dept-tree',
                url: ctx + 'dept/tree',
                accordion: true,
                highlightCurrent: true,
                showCheckbox: true,
                checkStrictly: true,
                renderAfterExpand: false,
                request: {
                    name: 'name',
                    key: "id",
                    checked: "checked",
                    data: 'data'
                },
                response: {
                    statusName: "code",
                    statusCode: 200,
                    dataName: "data"
                }
            });
            return _deptTree;
        }

        function reloadDeptTree() {
            _deptTree = renderDeptTree();
        }

        form.on('submit(user-add-form-submit)', function (data) {
            var checked = _deptTree.getChecked(false, true);
            var deptIds = [];
            var deptNames = [];
            layui.each(checked, function (key, item) {
                deptIds.push(item.id);
                deptNames.push(item.name);
            });
            data.field.deptIds = deptIds;
            data.field.deptNameLists = deptNames;
            data.field.courseContent = editor.txt.text();
            febs.post(ctx + 'course/add', data.field, function () {
                layer.closeAll();
                $('#febs-user').find('#query').click();
            });
            return false;
        });
    });
</script>